<style scoped lang="scss">
  .Object-border {
    width:100%;
    height:1px;

  }
</style>
<template>
  <div>
    <starTemplateMapHeader v-if="!!title" :title="title" :expand="expand" :titleStyle="titleStyle" :editable="editable" @expand="expandAction" @remove="$emit('remove')">
      <slot name="title"><span :style="titleStyle">{{title}}</span></slot>
    </starTemplateMapHeader>
    <div :class="!!title?'Object-content-title':''" v-show="expand">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "starTemplateMapWrapper",
  data(){
    return {
      expand:false
    }
  },
  props:{
    title:{
      default:()=>{
        return 'title';
      }
    },
    titleStyle:{
      default:()=>{
        return {};
      }
    },
    expanded:{
      default:()=>{
        return false;
      }
    },
    editable:{
      default:()=>{
        return false;
      }
    },
    checkable: {
      default: () => {
        return false;
      }
    },
  },
  mounted() {
    this.expand=this.expanded;
  },
  watch:{
    expanded:function (val){
      this.expand=val;
    }
  },
  methods:{
    expandAction(){
      this.expand=!this.expand;
      this.$emit('expand',this.expand);
    },
  }
}
</script>